<template>
  <div >
    <div class="centerkan">
      <span @click="btn">精选专题></span>
    </div>
    <div class="box">
      <div
        class="box1"
        v-for="(item, index) in list"
        :key="index"
        @click="goxiang(item.id)"
      >
        <img :src="item.pic" />
        <span v-html="item.title"></span>
        <br />
        <div class="p1">{{ item.descript }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    goxiang(id) {
      this.$router.push({ path: "/shoudetails", query: { id } });
    },
    btn() {
      this.$router.push("/Detailtopic");
    },
  },
  mounted() {
    this.$API.shouzhuanti().then((res) => {
      this.list = res.data.data;
      // console.log(res.data.data);
    });
    // this.$axios.get("https://api.it120.cc/small4/cms/news/list").then((res) => {
    //   this.list = res.data.data;
    //   console.log(res.data.data);
    //   // console.log(res);
    // });
    //   },
  },
};
</script>
<style lang="scss" scoped>
.centerkan {
  // height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    font-size: 1rem;
  }
}
.box {
  width: 100%;
  // height: 8rem;
  // background: red;
  display: flex;
  //   overflow: auto;
  overflow-x: scroll;
  .box1 {
    width: 15rem;
    // height: 2.8rem;
    margin-left: 0.12rem;
    // margin: 0 60px;
    // display: flex;
    // justify-content: space-around;
    // flex-wrap: wrap;
    img {
      width: 14rem;
      height: 7rem;
      display: block;
      border-radius: 0.06rem;
    }
    span {
      font-size: 0.4rem;
    }
    .p1 {
      font-size: 0.4rem;
      color: #a8a8a8;
      //   margin-top: 0.2rem;
      width: 13.24rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>